<template>
	<view>
		<swiper :indicator-dots="isShowDot && showDot" class="swiper" :style="{height:(200*col)+'rpx'}">
		  <swiper-item v-for="(item, index) in listdivInfo" :key="index" class="swiper-item">
			<view v-for="(child, code) in item" class="smallItem" :key="code" @click="itemClick(child)" :style="{ width: width + '%' }">
			  <u-image :src="child.category_img" width="80rpx" height="80rpx"></u-image>
			  <view class="name">{{ child.category_name }}</view>
			</view>
		  </swiper-item>
		</swiper>
		
	</view>
</template>



<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //一行排列数
    nums: {
      type: Number,
      default: 4,
    },

    //排列行数
    col: {
      type: Number,
      default: 1,
    },
    //是否展示指示灯
    isShowDot: {
      type: Boolean,
      default: true,
    },
  },

	  watch: {
		list: {
		  handler: function (newVal, oldVal) {
			this.listdiv();
		  },
		  deep: true,
		},
	  },

	  mounted() {
		this.listdiv();
	  },
	  data() {
		return {
		  listdivInfo: [],
		  width: 25,
		  showDot: true,
		};
	  },
	methods: {
		itemClick(item){
			uni.navigateTo({
				url:'/pages/merchant/merchant?category_id=' + item.category_id + '&title=' + item.category_name
			})
		}, 
	  
		async listdiv() {
			  this.width = 100 / this.nums;
			  var arr = [];
			  let that = this;
			  console.log(that.nums * that.col);
			  await this.list.forEach((v, index) => {
					var num = Math.floor(index / (that.nums * that.col));
					if (!arr[num]) {
					  arr[num] = [];
					  arr[num].push(v);
					} else {
					  arr[num].push(v);
					}
			  });
			  this.listdivInfo = arr;
			  if (this.listdivInfo.length > 1) {
				this.showDot = true;
			  } else {
				this.showDot = false;
			  }
		},
	},
};
</script>

<style lang="scss" scoped>
.swiper {
  // margin: 30rpx 32rpx;
  background: white;
  // border-radius: 32rpx;
  padding: 10rpx;
}

.swiper-item {
  display: flex;
  flex-wrap: wrap;

  .smallItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 12rpx 0;
    overflow: hidden;

    image {
      width: 80rpx;
      height: 80rpx;
    }

    .name {
      margin-top: 15rpx;
      font-size: 28rpx;
    }
  }
}
</style>
